<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询表单；查询 新增按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">分类名</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="addBtn" type="button" value="新增一级分类" class="layui-btn">
            <input id="searchBtn" type="button" value="查询" class="layui-btn">
        </div>
    </div>
</form>

<table id="table1"></table>


<!-- 弹出窗口模板1（新增/编辑顶级分类） -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <!-- 放置一个隐藏框 name="id" 可以被赋值
                        新增的时候id没有值 编辑的时候id有值 -->
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 放置一个隐藏框 id="parentId" 给下级菜单的parentId赋值 -->
            <input type="hidden" id="parentId" name="parentId" autocomplete="off" class="layui-input">
            <div class="layui-inline">
                <label class="layui-form-label">分类排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sequence" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">上架状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择分类状态</option>
                        <option value="0">上架</option>
                        <option value="-1">下架</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 弹出窗口模板2（编辑下级分类） -->
<script id="template2" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <!-- 放置一个隐藏框 name="id" 可以被赋值
                        新增的时候id没有值 编辑的时候id有值 -->
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-inline">
                    <select id="parent" name="parentId"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分类排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sequence" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">上架状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择分类状态</option>
                        <option value="0">上架</option>
                        <option value="-1">下架</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">标签图片</label>
                <div class="layui-input-inline">
                    <!-- 选择文件并上传时，上传文件就已经完成了，并返回文件地址 -->
                    <img id="iconImg" width="50ox" height="50px"/>
                    <!-- 点击保存时，保存到数据库的只是上传的文件的地址 -->
                    <input id="iconInput" type="hidden" name="icon" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 弹出窗口模板3（加下级） -->
<script id="template3" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <!-- 放置一个隐藏框 name="id" 可以被赋值
                        新增的时候id没有值 编辑的时候id有值 -->
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 放置一个隐藏框 id="parentId" 给下级菜单的parentId赋值 -->
            <input type="hidden" id="parentId" name="parentId" autocomplete="off" class="layui-input">
            <div class="layui-inline">
                <label class="layui-form-label">分类排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sequence" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">上架状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择分类状态</option>
                        <option value="0">上架</option>
                        <option value="-1">下架</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">标签图片</label>
                <div class="layui-input-inline">
                    <!-- 选择文件并上传时，上传文件就已经完成了，并返回文件地址 -->
                    <img id="iconImg" width="50ox" height="50px"/>
                    <!-- 点击保存时，保存到数据库的只是上传的文件的地址 -->
                    <input id="iconInput" type="hidden" name="icon" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn3" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 表格操作模板 被每一条数据反复使用 -->
<script id="template4" type="text/html">
    <input lay-event="add" type="button" class="layui-btn layui-btn-xs" value="加下级"/>
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
</script>

<!-- 引入依赖的js文件 -->
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'treeTable', 'upload'], function () {
        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var treeTable = layui.treeTable;//树形表格
        var upload = layui.upload;//上传附件
        var $ = layui.jquery;//从layui中把jquery拿出来用

        //给保存按钮绑事件
        //标签名选择器 id选择器：作用于整个<body><body/> 只要当前页面有saveBtn，就能保存
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            if (!data.name) {
                layer.msg("分类名不能为空")
                return false;
            }
            //把数据传到后台 Ajax异步请求
            //只有请求成功了，才进function！！！
            $.post("/category/save", data, function () {
                layer.closeAll();
                layer.msg("保存成功");
                $("#searchBtn").click();
            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格 查数据
            treeTable.render({
                elem: "#table1",
                url: "/category/tree",
                cols: [[
                    {title: "ID", field: "id"},
                    {title: "分类名称", field: "name"},
                    {title: "图标", field: "icon"},
                    {
                        title: "状态", field: "status", templet: function (provider) {
                            return provider.status === '0' ? '上架' : '下架';
                        }
                    },
                    {title: "操作", templet: "#template4"}
                ]],
                tree: {
                    view: {
                        showIcon: false//不展示图标
                    }
                },
                where: {name: $("#input1").val()},
                page: true,
                limits: [10, 15, 20],
                limit: 10
            });
        }).click();

        //给新增一级分类绑定事件
        $("#addBtn").on("click", function () {
            //弹出窗口
            layer.open({
                title: "新增分类",
                type: 1,
                area: ['400px', '400px'],
                content: $("#template1").html()
            });
            //渲染下拉框
            form.render();
            //新增一级菜单的时候parentId默认是0，直接把0放到隐藏框里
            $("#parentId").val(0);
        });

        //给表格操作（编辑/删除/加下级）绑事件
        treeTable.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //编辑 有上级分类的条目，点击编辑后可以选择它的上级分类：顶级分类弹原来的模板，下级分类弹新的模板
            if (event === "edit") {
                //先去后台获取当前商品的所有数据，取成功了，带着数据再弹窗
                $.get("/category/selectById/" + data.id, function (category) {//function()内 给传回的json格式数据命名，方便在下面引用
                    //点了编辑，如果parentId=0，就是顶级分类，弹原来的模板；否则弹新的模板
                    if (data.parentId === 0) {
                        //1.弹出窗口
                        layer.open({
                            title: "编辑分类",
                            type: 1,
                            area: ['400px', '400px'],
                            content: $("#template1").html()
                        });

                        //2.把查到的category对象放进form表单中
                        //第一个参数：定位form表单；第二个参数：给form表单赋值
                        form.val("form1", category);
                    } else {
                        //获取所有的分类信息
                        $.get("/category/all", function (categories) {
                            //1.弹出窗口
                            layer.open({
                                title: "编辑分类",
                                type: 1,
                                area: ['400px', '400px'],
                                content: $("#template2").html()
                            });

                            //把option放到分类下拉框里
                            $.each(categories, function (index, item) {
                                $("#parent").append("<option value='" + item.id + "'>" + item.name + "</option>");
                            })
                            //再渲染下拉框
                            form.render();

                            //渲染上传文件功能绑定的元素（图片/按钮···）
                            upload.render({
                                //渲染哪个元素，使之可以上传文件
                                elem: "#iconImg",
                                //请求路径
                                url: "/attachment/uploadOne",
                                //上传完成后做什么
                                done: function (res, index, upload) {
                                    if (res.code === 0) {
                                        //把保存的路径放到文本框里
                                        $("#iconInput").val(res.data);
                                        //在img里显示上传的图片 给id所指的标签加一个值，是文件上传的路径
                                        $("#iconImg").attr("src", res.data);
                                    }
                                }
                            });

                            //2.把查到的category对象放进form表单中
                            //第一个参数：定位form表单；第二个参数：给form表单赋值
                            form.val("form1", category);
                            //如果设置过标签图了，就把图放到框里
                            if (category.icon != null) {
                                $("#iconImg").attr("src", category.icon);
                            }
                        });
                    }
                });
            }

            //删除
            if (event === "delete") {
                //弹窗确认框 点击确认执行第二个函数，点击取消执行第三个函数
                layer.confirm("确认删除？", function () {
                    //第二个函数 点击确认 Ajax发请求
                    $.post("/category/delete/" + data.id, function () {
                        layer.closeAll();
                        layer.msg("删除成功");
                        $("#searchBtn").click();
                    })
                    //第三个函数 点击取消 自动关窗口
                }, function () {
                });
            }

            //加下级
            if (event === "add") {
                layer.open({
                    title: "新增下级菜单",
                    type: 1,
                    area: ['400px', '400px'],
                    content: $("#template3").html()
                });
                //渲染下拉框
                form.render();

                //渲染上传文件功能绑定的元素（图片/按钮···）
                upload.render({
                    //渲染哪个元素，使之可以上传文件
                    elem: "#iconImg",
                    //请求路径
                    url: "/attachment/uploadOne",
                    //上传完成后做什么
                    done: function (res, index, upload) {
                        if (res.code === 0) {
                            //把保存的路径放到文本框里
                            $("#iconInput").val(res.data);
                            //在img里显示上传的图片 给id所指的标签加一个值，是文件上传的路径
                            $("#iconImg").attr("src", res.data);
                        }
                    }
                });

                $("#saveBtn3").on("click", function () {
                    //1.把表单中的数据都取出来
                    var date = form.val("form1");
                    //给下级菜单的parentID赋值
                    date.parentId = data.id;
                    if (!date.name) {
                        layer.msg("分类名不能为空")
                        return false;
                    }
                    //2.派一个人去发请求，把上面取出来的数据带过去（Ajax）
                    $.post("/category/save", date, function () {
                        layer.closeAll();
                        layer.msg("保存成功");
                        $("#searchBtn").click();
                    });
                });
            }
        });
    });
</script>
</body>
</html>
